<template>
    <div class="box">
        <!-- 一行一个 -->
        <div
            class="square"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx'
            }"
            v-if="
                (!Object.keys(skillList).length || (skillList.tabs == 1 && !skillList.imgList.length)) &&
                !props.isUniapp
            ">
            <div class="item one" v-for="item in num" :key="item">
                <div class="search_contain one_seaerch">
                    <div class="search_img">
                        <img src="../../assets/mall/empty1.png" />
                        <div class="time" v-if="!Object.keys(skillList).length">
                            <span style="flex-shrink: 0">距结束</span>
                            <div><div style="width: 120%; transform: scale(0.8)">00天06:06:00</div></div>
                        </div>
                        <div class="time" v-if="Object.keys(skillList).length && skillList.contentList.includes(2)">
                            <span style="flex-shrink: 0">距结束</span>
                            <div><div style="width: 120%; transform: scale(0.8)">00天06:06:00</div></div>
                        </div>
                    </div>
                    <div class="serch_all">
                        <div>
                            <span class="search_name" v-if="!Object.keys(skillList).length"
                                >这里显示商品名称，最多显示2行</span
                            >
                            <span
                                class="search_name"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(1)"
                                >这里显示商品名称，最多显示2行</span
                            >
                            <div class="stock" v-if="!Object.keys(skillList).length">仅剩3件</div>
                            <div
                                class="stock"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(3)">
                                仅剩3件
                            </div>
                        </div>
                        <div class="search_row">
                            <div class="search_money">
                                <text>￥</text>
                                <text class="price">9</text>
                                <text>.9</text>
                                <text class="price-pre" v-if="!Object.keys(skillList).length">￥100</text>
                                <text
                                    class="price-pre"
                                    v-if="Object.keys(skillList).length && skillList.contentList.includes(4)"
                                    >￥100</text
                                >
                            </div>
                            <div class="shop-cart">
                                <button class="buybtn" v-if="!Object.keys(skillList).length">马上抢</button
                                ><button
                                    class="buybtn"
                                    v-if="Object.keys(skillList).length && skillList.contentList.includes(5)">
                                    马上抢
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="square"
            v-if="skillList.tabs == 1 && skillList.imgList.length"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx'
            }">
            <div class="item one" v-for="item in skillList.imgList" :key="item" @click="jump(item)">
                <div class="search_contain one_seaerch">
                    <div class="search_img">
                        <GoodImgStatus v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            class="search_sigle"
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"></image>
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <span style="flex-shrink: 0">{{
                                item.activityStatusName.realStatus == 3
                                    ? '已结束'
                                    : item.activityStatusName.realStatus == 1
                                    ? '距开始'
                                    : '距结束'
                            }}</span>
                            <div class="timeContent">
                                <CountDown
                                    style="width: 120%; transform: scale(0.8)"
                                    v-if="item.activityStatusName.realStatus != 3"
                                    :endTime="
                                        item.activityStatusName.realStatus == 1
                                            ? item.activityStartTime
                                            : item.activityEndTime
                                    "
                                    format="DD天HH:mm:ss" />
                            </div>
                        </div>
                    </div>
                    <div class="serch_all">
                        <div>
                            <span class="search_name" v-if="skillList.contentList.includes(1)">{{
                                (item.activityGoods || [])[0]?.goodsName
                            }}</span>
                            <span class="stock" v-if="skillList.contentList.includes(3)"
                                >仅剩{{ getAllStock(item.activityGoods || []) }}件</span
                            >
                        </div>

                        <div class="search_row">
                            <div class="search_money">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">{{
                                    prePrice(item.activityGoods, 'skuAttrInfo')
                                }}</text>
                            </div>
                            <div class="shop-cart">
                                <!-- onSale:1:上架、2:下架（仓库）、3 售罄 -->
                                <button
                                    class="buybtn"
                                    @click.stop="addCart(item)"
                                    :class="[getAllStock(item.activityGoods || []) == 0 ? 'disable' : '', 'buybtn']"
                                    v-if="skillList.contentList.includes(5) && item.activityStatusName.realStatus != 3">
                                    马上抢
                                </button>
                                <button
                                    class="buybtn"
                                    @click.stop="addCart(item)"
                                    :class="[item.activityStatusName.realStatus == 3 ? 'disable' : '', 'buybtn']"
                                    v-if="skillList.contentList.includes(5) && item.activityStatusName.realStatus == 3">
                                    已结束
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 一行两个 -->
        <div
            class="square"
            v-if="skillList.tabs == '2' && skillList.imgList.length"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx'
            }">
            <div class="item" style="background: none">
                <!-- <div v-for="item in skillList.imgList" :key="item" class="bottom_space"> -->
                <div v-for="item in allData.firstColumn_two" :key="item" class="bottom_space">
                    <div class="two_square" style="height: 168px" @click="jump(item)">
                        <GoodImgStatus :isSmall="false" v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"
                            class="hotitem_img"
                            style="height: 168px"></image>
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <span style="flex-shrink: 0"
                                >{{
                                    item.activityStatusName.realStatus == 3
                                        ? '已结束'
                                        : item.activityStatusName.realStatus == 1
                                        ? '距开始'
                                        : '距结束'
                                }}&nbsp;</span
                            >
                            <div class="timeContent">
                                <CountDown
                                    v-if="item.activityStatusName.realStatus != 3"
                                    :endTime="
                                        item.activityStatusName.realStatus == 1
                                            ? item.activityStartTime
                                            : item.activityEndTime
                                    "
                                    format="DD天HH:mm:ss" />
                            </div>
                        </div>
                    </div>

                    <div class="hotitem_detail" @click="jump(item)">
                        <div class="hotitem_name" v-if="skillList.contentList.includes(1)">
                            <span>{{ (item.activityGoods || [])[0]?.goodsName }}</span>
                        </div>
                        <div class="stock" v-if="skillList.contentList.includes(3)">
                            仅剩{{ getAllStock(item.activityGoods || []) }}件
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">{{
                                    prePrice(item.activityGoods, 'skuAttrInfo')
                                }}</text>
                            </div>
                            <div>
                                <button
                                    class="buybtn"
                                    @click.stop="addCart(item)"
                                    :class="[getAllStock(item.activityGoods || []) == 0 ? 'disable' : '', 'buybtn']"
                                    v-if="skillList.contentList.includes(5) && item.activityStatusName.realStatus != 3">
                                    马上抢
                                </button>
                                <button
                                    class="buybtn"
                                    @click.stop="addCart(item)"
                                    :class="[item.activityStatusName.realStatus == 3 ? 'disable' : '', 'buybtn']"
                                    v-if="skillList.contentList.includes(5) && item.activityStatusName.realStatus == 3">
                                    已结束
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" style="background: none">
                <div v-for="item in allData.twoColumn_two" :key="item" class="bottom_space">
                    <div class="two_square" style="height: 168px" @click="jump(item)">
                        <GoodImgStatus :isSmall="false" v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"
                            class="hotitem_img"
                            style="height: 168px"></image>
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <span style="flex-shrink: 0"
                                >{{
                                    item.activityStatusName.realStatus == 3
                                        ? '已结束'
                                        : item.activityStatusName.realStatus == 1
                                        ? '距开始'
                                        : '距结束'
                                }}&nbsp;</span
                            >
                            <div class="timeContent">
                                <CountDown
                                    v-if="item.activityStatusName.realStatus != 3"
                                    :endTime="
                                        item.activityStatusName.realStatus == 1
                                            ? item.activityStartTime
                                            : item.activityEndTime
                                    "
                                    format="DD天HH:mm:ss" />
                            </div>
                        </div>
                    </div>

                    <div class="hotitem_detail" @click="jump(item)">
                        <div class="hotitem_name" v-if="skillList.contentList.includes(1)">
                            <span>{{ (item.activityGoods || [])[0]?.goodsName }}</span>
                        </div>
                        <div class="stock" v-if="skillList.contentList.includes(3)">
                            仅剩{{ getAllStock(item.activityGoods || []) }}件
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">{{
                                    prePrice(item.activityGoods, 'skuAttrInfo')
                                }}</text>
                            </div>
                            <div>
                                <button
                                    class="buybtn"
                                    @click.stop="addCart(item)"
                                    :class="[getAllStock(item.activityGoods || []) == 0 ? 'disable' : '', 'buybtn']"
                                    v-if="skillList.contentList.includes(5) && item.activityStatusName.realStatus != 3">
                                    马上抢
                                </button>
                                <button
                                    class="buybtn"
                                    @click.stop="addCart(item)"
                                    :class="[item.activityStatusName.realStatus == 3 ? 'disable' : '', 'buybtn']"
                                    v-if="skillList.contentList.includes(5) && item.activityStatusName.realStatus == 3">
                                    已结束
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="square"
            v-if="skillList.tabs == '2' && !skillList.imgList.length && !props.isUniapp"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx'
            }">
            <div class="item" v-for="item in skillList.imgList.length ? skillList.imgList.length : 2" :key="item">
                <div class="no_icon">
                    <img src="../../assets/mall/empty2.png" />
                    <div class="time" v-if="!Object.keys(skillList).length">距结束&nbsp;00天06:06:00</div>
                    <div class="time" v-if="Object.keys(skillList).length && skillList.contentList.includes(2)">
                        距结束&nbsp;00天06:06:00
                    </div>
                </div>
                <div class="hotitem_detail">
                    <div class="hotitem_name">
                        <span v-if="!Object.keys(skillList).length">这里显示商品名称，最多显示2行</span>
                        <span v-if="Object.keys(skillList).length && skillList.contentList.includes(1)"
                            >这里显示商品名称，最多显示2行</span
                        >
                    </div>
                    <div class="stock" v-if="!Object.keys(skillList).length">仅剩3件</div>
                    <div class="stock" v-if="Object.keys(skillList).length && skillList.contentList.includes(3)">
                        仅剩3件
                    </div>

                    <div class="hotitem_count">
                        <div class="hotitem_text">
                            <text>￥</text>
                            <text class="price">9</text>
                            <text>.9 </text>
                            <text class="price-pre" v-if="!Object.keys(skillList).length">￥100</text>

                            <text
                                class="price-pre"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(4)"
                                >￥100</text
                            >
                        </div>
                        <button class="buybtn" v-if="!Object.keys(skillList).length">马上抢</button>
                        <button
                            class="buybtn"
                            v-if="Object.keys(skillList).length && skillList.contentList.includes(5)">
                            马上抢
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 一行三个 -->
        <div
            class="square"
            v-if="skillList.tabs == '3' && skillList.imgList.length"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx'
            }">
            <div class="item third" style="background: none">
                <!-- <div v-for="item in skillList.imgList" :key="item" class="bottom_space"> -->
                <div v-for="item in allData.firstColumn_three" :key="item" class="bottom_space">
                    <div class="two_square" style="height: 109px" @click="jump(item)">
                        <GoodImgStatus v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"
                            class="hotitem_img"
                            style="height: 109px"></image>
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <div class="time_content">
                                <span style="flex-shrink: 0">{{
                                    item.activityStatusName.realStatus == 3
                                        ? '已结束'
                                        : item.activityStatusName.realStatus == 1
                                        ? '距开始'
                                        : '距结束'
                                }}</span>
                                <div class="timeContent">
                                    <CountDown
                                        style="width: 125%; transform: scale(0.8)"
                                        v-if="item.activityStatusName.realStatus != 3"
                                        :endTime="
                                            item.activityStatusName.realStatus == 1
                                                ? item.activityStartTime
                                                : item.activityEndTime
                                        "
                                        format="DD天HH:mm:ss" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div class="hotitem_name third_name" v-if="skillList.contentList.includes(1)">
                            {{ (item.activityGoods || [])[0]?.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">
                                    {{ prePrice(item.activityGoods, 'skuAttrInfo') }}
                                </text>
                            </div>
                            <div v-if="skillList.contentList.includes(5)">
                                <image
                                    v-if="getAllStock(item.activityGoods || []) == 0"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart_disabled.png"
                                    @click.stop="alert" />
                                <image
                                    v-else
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item third" style="background: none">
                <div v-for="item in allData.twoColumn_three" :key="item" class="bottom_space">
                    <div class="two_square" style="height: 109px" @click="jump(item)">
                        <GoodImgStatus v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"
                            class="hotitem_img"
                            style="height: 109px"></image>

                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <div class="time_content">
                                <span style="flex-shrink: 0">{{
                                    item.activityStatusName.realStatus == 3
                                        ? '已结束'
                                        : item.activityStatusName.realStatus == 1
                                        ? '距开始'
                                        : '距结束'
                                }}</span>
                                <div class="timeContent">
                                    <CountDown
                                        style="width: 125%; transform: scale(0.8)"
                                        v-if="item.activityStatusName.realStatus != 3"
                                        :endTime="
                                            item.activityStatusName.realStatus == 1
                                                ? item.activityStartTime
                                                : item.activityEndTime
                                        "
                                        format="DD天HH:mm:ss" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div class="hotitem_name third_name" v-if="skillList.contentList.includes(1)">
                            {{ (item.activityGoods || [])[0]?.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">
                                    {{ prePrice(item.activityGoods, 'skuAttrInfo') }}</text
                                >
                            </div>
                            <div v-if="skillList.contentList.includes(5)">
                                <image
                                    v-if="getAllStock(item.activityGoods || []) == 0"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart_disabled.png"
                                    @click.stop="alert" />
                                <image
                                    v-else
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item third" style="background: none">
                <div v-for="item in allData.threeColumn_three" :key="item" class="bottom_space">
                    <div class="two_square" style="height: 109px" @click="jump(item)">
                        <GoodImgStatus v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            mode="aspectFill"
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"
                            class="hotitem_img"
                            style="height: 109px"></image>
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <div class="time_content">
                                <span style="flex-shrink: 0">{{
                                    item.activityStatusName.realStatus == 3
                                        ? '已结束'
                                        : item.activityStatusName.realStatus == 1
                                        ? '距开始'
                                        : '距结束'
                                }}</span>
                                <div class="timeContent">
                                    <CountDown
                                        style="width: 125%; transform: scale(0.8)"
                                        v-if="item.activityStatusName.realStatus != 3"
                                        :endTime="
                                            item.activityStatusName.realStatus == 1
                                                ? item.activityStartTime
                                                : item.activityEndTime
                                        "
                                        format="DD天HH:mm:ss" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div class="hotitem_name third_name" v-if="skillList.contentList.includes(1)">
                            {{ (item.activityGoods || [])[0]?.goodsName }}
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">
                                    {{ prePrice(item.activityGoods, 'skuAttrInfo') }}</text
                                >
                            </div>
                            <div v-if="skillList.contentList.includes(5)">
                                <image
                                    v-if="getAllStock(item.activityGoods || []) == 0"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart_disabled.png"
                                    @click.stop="alert" />
                                <image
                                    v-else
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="square"
            v-if="skillList.tabs == '3' && !skillList.imgList.length && !props.isUniapp"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx'
            }">
            <div
                class="item third"
                v-for="item in skillList.imgList.length ? skillList.imgList.length : Number(skillList.tabs)"
                :key="item">
                <div class="no_icon" style="height: 109px">
                    <img src="../../assets/mall/empty1.png" />
                    <div class="time" v-if="!Object.keys(skillList).length">
                        <div class="time_content">
                            <span style="flex-shrink: 0">距结束</span>
                            <div><div style="width: 125%; transform: scale(0.8)">00天06:06:00</div></div>
                        </div>
                    </div>
                    <div class="time" v-if="Object.keys(skillList).length && skillList.contentList.includes(2)">
                        <div class="time_content">
                            <span style="flex-shrink: 0">距结束</span>
                            <div><div style="width: 125%; transform: scale(0.8)">00天06:06:00</div></div>
                        </div>
                    </div>
                </div>
                <div class="hotitem_detail third_detail">
                    <div class="hotitem_name third_name" v-if="!Object.keys(skillList).length">
                        这里显示商品名称，最多显示2行
                    </div>
                    <div
                        class="hotitem_name third_name"
                        v-if="Object.keys(skillList).length && skillList.contentList.includes(1)">
                        这里显示商品名称，最多显示2行
                    </div>
                    <div class="hotitem_count">
                        <div class="hotitem_text">
                            <text>￥</text>
                            <text class="price">9</text>
                            <text>.9 </text>
                            <text class="price-pre" v-if="!Object.keys(skillList).length"> ￥100 </text>
                            <text
                                class="price-pre"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(4)">
                                ￥100
                            </text>
                        </div>
                        <div>
                            <image
                                class="hotitem_car"
                                src="../../assets/mall/cart.png"
                                v-if="!Object.keys(skillList).length"></image>
                            <image
                                class="hotitem_car"
                                src="../../assets/mall/cart.png"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(5)"></image>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 滑动 -->
        <div
            v-if="skillList.tabs == '4' && skillList.imgList.length"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx',
                width: '100%'
            }">
            <scroll-view scroll-x="true" class="scroll-view_H">
                <div class="item four" v-for="item in skillList.imgList" :key="item">
                    <div style="position: relative; height: 145px" @click="jump(item)">
                        <GoodImgStatus :isSmall="false" v-if="getAllStock(item.activityGoods || []) == 0" />
                        <image
                            webp
                            :src="getOssImg(item.coverImg) || defaultImg"
                            class="hotitem_img"
                            style="height: 145px"
                            mode="aspectFill"></image>
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <div class="time_content">
                                <span style="flex-shrink: 0"
                                    >{{
                                        item.activityStatusName.realStatus == 3
                                            ? '已结束'
                                            : item.activityStatusName.realStatus == 1
                                            ? '距开始'
                                            : '距结束'
                                    }}&nbsp;</span
                                >
                                <div class="timeContent">
                                    <CountDown
                                        v-if="item.activityStatusName.realStatus != 3"
                                        :endTime="
                                            item.activityStatusName.realStatus == 1
                                                ? item.activityStartTime
                                                : item.activityEndTime
                                        "
                                        format="DD天HH:mm:ss" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hotitem_detail third_detail" @click="jump(item)">
                        <div
                            class="hotitem_name third_name"
                            style="height: 34px"
                            v-if="skillList.contentList.includes(1)">
                            {{ (item.activityGoods || [])[0]?.goodsName }}
                        </div>
                        <div class="stock" v-if="skillList.contentList.includes(3)">
                            仅剩{{ getAllStock(item.activityGoods || []) }}件
                        </div>
                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">{{ priceNum(item.activityGoods, 0) }}</text>
                                <text v-if="priceNum(item.activityGoods, 1)"
                                    >.{{ priceNum(item.activityGoods, 1) }}
                                </text>
                                <text class="price-pre" v-if="skillList.contentList.includes(4)">
                                    {{ prePrice(item.activityGoods, 'skuAttrInfo') }}
                                </text>
                            </div>
                            <div v-if="skillList.contentList.includes(5)">
                                <image
                                    v-if="getAllStock(item.activityGoods || []) == 0"
                                    class="hotitem_car"
                                    src="../../assets/mall/cart_disabled.png"
                                    @click.stop="alert" />
                                <image
                                    v-else
                                    class="hotitem_car"
                                    src="../../assets/mall/cart.png"
                                    @click.stop="addCart(item)" />
                            </div>
                        </div>
                    </div>
                </div>
            </scroll-view>
        </div>
        <div
            v-if="skillList.tabs == '4' && !skillList.imgList.length && !props.isUniapp"
            :style="{
                'margin-bottom': skillList ? (skillList.space ? skillList.space * 2 + 'rpx' : 0 + 'rpx') : 0 + 'rpx',
                width: '100%'
            }">
            <scroll-view scroll-x="true" @scroll="scroll" class="scroll-view_H">
                <div
                    class="item four"
                    v-for="item in skillList.imgList.length ? skillList.imgList : Number(skillList.tabs)"
                    :key="item">
                    <div class="no_icon" style="height: 145px">
                        <img src="../../assets/mall/empty2.png" />
                        <div class="time" v-if="skillList.contentList.includes(2)">
                            <div class="time_content" v-if="!Object.keys(skillList).length">
                                距结束&nbsp;00天06:06:00
                            </div>
                            <div
                                class="time_content"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(2)">
                                距结束&nbsp;00天06:06:00
                            </div>
                        </div>
                    </div>

                    <div class="hotitem_detail third_detail">
                        <div class="hotitem_name third_name" v-if="!Object.keys(skillList).length">
                            这里显示商品名称，最多显示2行
                        </div>
                        <div
                            class="hotitem_name third_name"
                            v-if="Object.keys(skillList).length && skillList.contentList.includes(1)">
                            这里显示商品名称，最多显示2行
                        </div>
                        <div class="stock" v-if="!Object.keys(skillList).length">仅剩3件</div>
                        <div class="stock" v-if="Object.keys(skillList).length && skillList.contentList.includes(3)">
                            仅剩3件
                        </div>

                        <div class="hotitem_count">
                            <div class="hotitem_text">
                                <text>￥</text>
                                <text class="price">9</text>
                                <text>.9 </text>
                                <text class="price-pre" v-if="!Object.keys(skillList).length"> ￥100 </text>
                                <text
                                    class="price-pre"
                                    v-if="Object.keys(skillList).length && skillList.contentList.includes(4)">
                                    ￥100
                                </text>
                            </div>
                            <image
                                class="hotitem_car"
                                src="../../assets/mall/cart.png"
                                v-if="!Object.keys(skillList).length" />
                            <image
                                class="hotitem_car"
                                src="../../assets/mall/cart.png"
                                v-if="Object.keys(skillList).length && skillList.contentList.includes(5)" />
                        </div>
                    </div>
                </div>
            </scroll-view>
        </div>
    </div>
</template>
<script setup name="seckill">
import { floatDivide, getOssImg } from '../../commons/utils.js';
import { ref, watch, reactive } from 'vue';
import CountDown from '@/components/countdown';
import defaultImg from '../../assets/mall/errorImg.png';
import GoodImgStatus from '../../components/imgStatus/index.vue';

const emit = defineEmits(['jump', 'addCart']);
const allData = reactive({
    firstColumn_two: [],
    twoColumn_two: [],
    firstColumn_three: [],
    twoColumn_three: [],
    threeColumn_three: []
});
const num = ref(1);
const imgList = ref([]);
const columnData = ref([]);
let skillList = reactive({});
let props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
const jump = item => {
    if (props.isUniapp) {
        emit('jump', item);
    }
};
const addCart = item => {
    if (props.isUniapp) {
        emit('addCart', { data: item });
    }
};
/**秒杀价格升序排列，取最小值*/
const upwardData = (data, sparam) => {
    var param = JSON.parse(JSON.stringify(data));
    param.sort((a, b) => {
        return a[sparam] - b[sparam];
    });
    return floatDivide(param[0]?.[sparam], 100);
};
/**原价价格升序排列，取最小值 */
const prePrice = (data, sparam) => {
    var param = JSON.parse(JSON.stringify(data));
    param.sort((a, b) => {
        return a[sparam]['skuPrice'] - b[sparam]['skuPrice'];
    });
    return floatDivide(param[0]?.[sparam]?.['skuPrice'], 100);
};
const alert = () => {
    if (props.isUniapp) {
        uni.showToast({
            title: `商品已售罄`,
            icon: 'none'
        });
    }
};
const getAllStock = data => {
    let stock = 0;
    data.forEach(item => {
        stock = stock + item.spikeStockSurplus;
    });
    return stock;
};
const priceNum = (amount, index) => {
    let data = upwardData(amount, 'spikePrice');
    let list = [];
    try {
        list = data.toString().split('.');
    } catch (e) {
        list = [Number(data)];
    }
    return list[index];
};
const getcolumn = (index, column, flag) => {
    if (flag) {
        imgList.value = JSON.parse(JSON.stringify(skillList.imgList));
        columnData.value = [];
    }
    if (Object.keys(skillList).length) {
        var spliceCurrent = imgList.value.splice(0, column);
        spliceCurrent[index] ? columnData.value.push(spliceCurrent[index]) : '';
        if (imgList.value.length) {
            getcolumn(index, column, false);
        }
        return columnData.value;
    }
};
watch(
    () => props.options,
    val => {
        if (Object.keys(val).length) {
            let data = JSON.parse(JSON.stringify(val));
            Object.assign(skillList, data);
            skillList.imgList.forEach(item => {
                Object.assign(item, { num: 0 });
            });
            //下架商品预览不展示
            skillList.imgList = skillList.imgList.filter(item => item.activityGoods[0].onSale != 2);
            if (val.tabs == 2) {
                allData.firstColumn_two = getcolumn(0, 2, true);
                allData.twoColumn_two = getcolumn(1, 2, true);
            }
            if (val.tabs == 3) {
                allData.firstColumn_three = getcolumn(0, 3, true);
                allData.twoColumn_three = getcolumn(1, 3, true);
                allData.threeColumn_three = getcolumn(2, 3, true);
            }
        }
    },
    { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.timeContent {
    width: 148rpx;
}
.scroll-view_H {
    white-space: nowrap;
    width: calc(100% - 27rpx);
    padding: 8rpx 16rpx 0 11rpx;
}
.uni-countdown::before {
    content: '距结束';
    color: #fff;
    font-size: 20rpx;
}
.box {
    display: flex;
    flex-wrap: wrap;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    .square {
        width: 100%;
        margin: 0 10rpx;
        display: flex;
        flex-wrap: wrap;
    }

    .third {
        width: calc(33.3% - 16rpx) !important;
    }
    .four {
        width: 290rpx !important;
        display: inline-block;
    }
    .one {
        width: calc(100% - 20rpx) !important;
        border-radius: 0 !important;
        &:last-child .one_seaerch {
            border-bottom: none;
        }
    }
    .item {
        width: calc(50% - 16rpx);
        margin: 0 8rpx 0 8rpx;
        flex-shrink: 0;
        border-radius: 16rpx;
        background-color: #fff;
        .allHeight {
            height: 218rpx;
        }
        .one_seaerch {
            margin: 0 22rpx;
            border-bottom: 2rpx solid #f5f5f5;
            padding: 36rpx 0 36rpx 0 !important;
        }
        .disable {
            background: #cccccc !important;
        }
        .buybtn {
            height: 60rpx;
            background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            border-radius: 30rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 60rpx;
            margin: 0;
        }
        .bottom_space {
            margin-bottom: 20rpx;
            background-color: #fff;
            border-radius: 8rpx;
            .two_square {
                position: relative;
                .two_time {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 24px;
                    background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                    border-radius: 0px 100px 0px 0px;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                    padding: 0 6px;
                }
            }
        }
        .no_icon {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 372rpx;
            background-color: #f2f2f2;
        }
        .time_content {
            display: flex;
            transform: scale(0.9);
            transform-origin: 0;
            font-size: 10px;
        }
        .time {
            display: flex;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 24px;
            background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            border-radius: 0px 100px 0px 0px;
            font-size: 10px;
            word-break: break-all;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 24px;
            padding: 0 6px;
        }
        .stock {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
            line-height: 12px;
            margin-top: 20rpx;
        }
        .search_contain {
            display: flex;
            padding: 24rpx 24rpx 18rpx 24rpx;
            .search_img {
                position: relative;
                width: 240rpx;
                height: 240rpx;
                margin-right: 18rpx;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f2f2f2;

                .search_sigle {
                    width: 100%;
                    height: 100%;
                    border-radius: 8rpx;
                }
            }
            .serch_all {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: calc(100% - 162rpx);

                .search_name {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #33302d;
                    line-height: 36rpx;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .search_row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .shop-cart {
                        position: relative;

                        .shop-cart-num {
                            position: absolute;
                            top: -8rpx;
                            right: -2rpx;
                            width: 25rpx;
                            height: 25rpx;
                            color: #fe292b;
                            font-size: 22rpx;
                            line-height: 24rpx;
                            font-weight: 400;
                            text-align: center;
                            background: #ffffff;
                            border-radius: 50%;
                            border: 2rrpx solid #fe292b;
                        }
                        .search_icon {
                            width: 54rpx;
                            height: 54rpx;
                        }
                    }

                    .search_money {
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-size: 24rpx;
                        font-weight: 600;
                        color: #fe292b;
                        line-height: 40rpx;
                        .price {
                            font-size: 36rpx;
                        }
                        .price-pre {
                            text-decoration: line-through;
                            font-size: 22rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #969696;
                            line-height: 22rpx;
                            padding-left: 10rpx;
                        }
                    }
                }
            }
        }
        .hotitem_img {
            width: 100%;
            height: 336rpx;
            border-radius: 16rpx 16rpx 0 0;
            background: #f2f2f2;
        }
        .third_detail {
            padding: 24rpx 22rpx !important;
        }
        .hotitem_detail {
            padding: 26rpx 22rpx;
            background-color: #fff;
            border-radius: 0 0 16rpx 16rpx;
            .third_name {
                font-size: 28rpx !important;
            }
            .hotitem_name {
                font-size: 32rpx;
                font-weight: 500;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .third_count {
                margin-top: 20rpx;
            }
            .hotitem_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20rpx;
                .hotitem_car {
                    width: 54rpx;
                    height: 54rpx;
                }
                .hotitem_text {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #fe292b;
                    font-family: PingFangSC-Medium, PingFang SC;
                    line-height: 32rpx;
                    .price {
                        font-size: 36rpx;
                    }
                    .price-pre {
                        text-decoration: line-through;
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #969696;
                        line-height: 22rpx;
                        padding-left: 10rpx;
                    }
                }
            }
        }
    }
}
</style>
